<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button @click="bgColor = 'blue'">修改颜色-变蓝</button>
        <!-- 让这个div的背景颜色没有写死，而是根据bgColor这个数据来 -->
        <!-- bgColor为红色，那背景颜色就为红色 -->
        <!-- 如果有多个样式不想写死，那么就用逗号隔开 -->
        <!-- color字体颜色没有写死，根据color变量来，color为orange，那么文字颜色就是orange -->
        <div :style="{ backgroundColor: bgColor, color: color}">我是div</div>

        <!-- es6里有简写形式：当左边的属性名跟右边的变量名一样时，可以简写为一个 -->
        <div :style="{ backgroundColor: bgColor, color}">我是div</div>
    </div>

    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                bgColor: 'red',
                color: 'orange'
            }
        })
    </script>
</body>
</html>